{% extends "hocabul/header.html" %}
{% block title %}Profile{% endblock %}
{% block extrahead %}
<script type="text/javascript" charset="utf-8">
	var page_edits = {
		enable_lesson_div: function() {
			document.getElementById('add_lesson_div').style.display = 'block';
		}
	}
</script>
{% endblock %}
{% block body %}
<h1>Current user is {{ cur_user.first_name }}</h1>
<select id='user_selector' onchange="window.location=this.options[this.selectedIndex].value">
		{% for user in users %}
     		<option value="{{ user.id }}">{{ user.first_name }} </option>	
		{% endfor %}
</select>

<div class="header">
	<h1>Courses</h1>
</div>
<ul class="list" id="course_list">
	{% for course in courses %}
    		<li id="c{{ course.id }}" course_id="{{ course.id }}" course_name="{{ course.name }}"=>{{ course.name }}	
	    		<a onclick="course_edits.delete_course({{cur_user.id}},{{course.id}});
	        	return false;"
	        	href="#c{{course.id}}">[x]
	        </a>
    		</li>
	{% endfor %}
</ul>
<li id="add_course_link">	
    		<a onclick="document.getElementById('add_course_div').style.display = 'block';"
        	href="#c{{course.id}}">Add a course
        </a>
 </li>
 
 <div id="add_course_div" class="add_item_div">
  	<select id='department_selector' onchange="course_edits.display_courses(this.options[this.selectedIndex].value)">
  		{% for department in departments %}
  			<option value="{{ department.id }}">{{ department.name }} </option>
  		{% endfor %}
  	</select>
  	<select id='course_selector'>
  	</select>
  	<a href="#" onclick='course_edits.add_course({{cur_user.id}},course_edits.get_course_selection())'>Add</a>
  	<a href="#" onclick="document.getElementById('add_course_div').style.display = 'none';">Done</a>
  	
  </div>
<div class="header">
	<h1>Lessons</h1>
</div>
<div>
	<ul class="list" id="lesson_list">
		{% for lesson in cur_user.lessons.all %}
	    		<li class="list_item" id="c{{ course.id }}">
	    			<div>
	    				<div class="lesson_name">{{ lesson.name }}</div>
	    			</div>	
	    		</li>
		{% endfor %}
	</ul>
</div>
<div>
	<li id="add_lesson_link">	
    		<a onclick="document.getElementById('add_lesson_div').style.display = 'block';"
        	href="#c{{course.id}}">Add a lesson
        </a>
 	</li>
 </div>
 <div id="add_lesson_div" class="add_item_div">
  	<select id='my_course_selector'">
  	</select>
  	<select id='course_selector'>
  	</select>
  	<a href="#" onclick='course_edits.add_course({{cur_user.id}},course_edits.get_course_selection())'>Add</a>
  	<a href="#" onclick="document.getElementById('add_course_div').style.display = 'none';">Done</a>
  </div>
	

{% endblock %}



